<script setup>
import { EiBlock, EiInfo } from '@eplat/ei';
import SERVICE from '@/api/example.js';

const refreshing = ref(false);
const loading = ref(false);
const finish = ref(false);

const page = reactive({
  pageSize: 20,
  currentPage: 0,
  result: []
});

const onRefresh = async () => {
  page.currentPage = 0;
  page.result = [];
  refreshing.value = true;
  await onLoad();
  refreshing.value = false;
};

const onLoad = async () => {
  loading.value = true;
  try {
    const request = new EiInfo();
    const block = new EiBlock('1');
    block.set('offset', page.currentPage * page.pageSize);
    block.set('limit', page.pageSize);
    request.addBlock(block);
    request.addBlock(new EiBlock('inqu_status'));
    const res = await SERVICE.queryEDCC03(request);
    const data = res.getBlock('1').getMappedRows();
    page.result.push(...data);
    page.currentPage++;
  } catch (err) {
    finish.value = true;
  }
  loading.value = false;
};

const router = useRouter();
const toEdit = (item) => {
  router.push({ name: 'EDCC0301', state: { ...item } });
};

const toNew = () => {
  router.push({ name: 'EDCC0302' });
};
</script>
<template>
  <XPage class="page-main" title="配置信息" header right-text="新增" @click-right="toNew">
    <van-pull-refresh v-model="refreshing" class="pull-refresh" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finish"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group
          v-for="(item, index) in page.result"
          :key="index"
          class="card-item"
          inset
          @click="toEdit(item)"
        >
          <van-cell title="配置项" class="item-value">{{ item.fkey }}</van-cell>
          <van-cell title="配置内容" class="item-value">{{ item.fvalue }}</van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
  </XPage>
</template>

<style lang="stylus" scoped>
.page-main

  .pull-refresh
    padding 4px

    .card-item
      margin 8px
      background-color white

      .item-value
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
</style>
